
<script setup lang="ts">
import { ref } from 'vue'

const food = ref('0_0')
const changeFood = () => {
  food.value = '00-00'
}

const eatFood = (food: string) => {
  alert(food + '好好吃~~再来一份')
}

const textEvent = (e: any, info: string) => {
  console.log(e)
  console.log(info)
}
</script>

<!-- 结构 -->
<template>
  <!-- 内联语句 -->
  <!-- <h2 v-on：click="food+='00000'">内联语句-直接写逻辑语句:{{ food }}</h2> -->
  <h2 @click="food += '00000'">内联语句-直接写逻辑语句:{{ food }}</h2>
  <!-- 处理函数 -->
  <h2 @click="changeFood">处理函数-适合写一些复杂的逻辑</h2>

  <!-- 调用函数+传递参数 -->
  <h2>吃东西</h2>
  <button @click="eatFood('龙来看看')">吃猪脚饭</button>

  <!-- 默认的事件参数 -->
  <!-- 事件触发时，浏览器会默认传递一个 【事件参数】 给函数，内部有很多信息
      触发事件时，如果既要获取默认的时间参数，又要 传递自定义的参数 
      可以使用￥event 替代默认的参数
  -->
  <button @click="textEvent($event, 'zhujiao')">测试事件参数</button>
</template>

<!-- 样式 -->
<style scoped>
</style>